<template>
  <!-- 
  颗粒物折算值超过20
  二氧化硫折算值超过100
  氮氧化物折算值超过150 
  -->
  <div class="left-panel">
    <div class="panel-content left-card-klw">
      <PanelTitle title="颗粒物处理状态"></PanelTitle>
      <div class="panel-warp">
        <!-- 左侧框 -->
        <div
          class="panel-item-l"
          :style="{
            backgroundImage: `url(${data.dust.calculated > 20 ? fkR : fkB})`,
          }"
        >
          <div>
            <img :src="data.dust.calculated > 20 ? klwR : klwB" alt="" />
            <div class="has-bg-text">
              <span>颗粒物</span>
            </div>
            <div class="no-bg-text">处理状态</div>
          </div>
        </div>
        <div class="panel-item-r">
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>实测值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.dust.measured }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>折算值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.dust.calculated }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>氧含量</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.o2 }}</span>
              <em class="unit">%</em>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-content left-card-so2">
      <PanelTitle title="二氧化硫处理状态"></PanelTitle>
      <div class="panel-warp">
        <div
          class="panel-item-l"
          :style="{
            backgroundImage: `url(${data.so2.calculated > 100 ? fkR : fkB})`,
          }"
        >
          <div>
            <img :src="data.so2.calculated > 100 ? SO2R : SO2B" alt="" />
            <div class="has-bg-text">
              <span>二氧化硫</span>
            </div>
            <div class="no-bg-text">处理状态</div>
          </div>
        </div>
        <div class="panel-item-r">
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>实测值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.so2.measured }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>折算值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.so2.calculated }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>氧含量</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.o2 }}</span>
              <em class="unit">%</em>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-content left-card-nox">
      <PanelTitle title="氮氧化物处理状态"></PanelTitle>
      <div class="panel-warp">
        <div
          class="panel-item-l"
          :style="{
            backgroundImage: `url(${data.nox.calculated > 150 ? fkR : fkB})`,
          }"
        >
          <div>
            <img :src="data.nox.calculated > 150 ? NOXR : NOXB" alt="" />
            <div class="has-bg-text">
              <span>氮氧化物 </span>
            </div>
            <div class="no-bg-text">处理状态</div>
          </div>
        </div>
        <div class="panel-item-r">
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>实测值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.nox.measured }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>折算值</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.nox.calculated }}</span>
              <em class="unit">mg/m3</em>
            </div>
          </div>
          <div class="panel-item-r-data">
            <div class="data-key">
              <span>氧含量</span>
            </div>
            <div class="data-val">
              <span class="num">{{ data.o2 }}</span>
              <em class="unit">%</em>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import PanelTitle from "@/views/components/PanelTitle.vue";

import fkB from "@/assets/leftImage/fkB.png";
import fkR from "@/assets/leftImage/fkR.png";

import klwB from "@/assets/leftImage/klwB.png";
import klwR from "@/assets/leftImage/klwR.png";
import NOXB from "@/assets/leftImage/NOXB.png";
import NOXR from "@/assets/leftImage/NOXR.png";
import SO2R from "@/assets/leftImage/SO2R.png";
import SO2B from "@/assets/leftImage/SO2B.png";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  }
})
onMounted(() => {
  console.log('%c [  ]-172', 'font-size:18px; background:#5b6161; color:#9fa5a5;', 
    props.data
  )
})
</script>
<style scoped lang="scss">
.panel-content {
  // border: 1px solid red;
  height: 300px;
  margin-bottom: 16px;
  .panel-warp {
    display: flex;
    padding: 20px;
    padding-right: 12px;
    .panel-item-l {
      width: 176px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      > div {
        .has-bg-text {
          margin: 8px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(
            90deg,
            rgba(19, 132, 225, 0) 0%,
            #1384e1 50%,
            rgba(19, 132, 225, 0) 100%
          );
          > span {
            font-family: "钉钉进步体 Regular";
            font-size: 24px;
            font-weight: normal;
            line-height: 32px;
            text-align: center;
            letter-spacing: 2px;
            color: #ffffff;
          }
        }
        .no-bg-text {
          font-family: "钉钉进步体 Regular";
          font-size: 20px;
          font-weight: normal;
          line-height: 32px;
          text-align: center;
          letter-spacing: 2px;
          background: linear-gradient(180deg, #f4ffff 0%, #009dff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          background-clip: text;
        }
      }
    }
    .panel-item-r {
      margin-left: 20px;

      display: flex;
      flex-direction: column;
      &-data {
        margin-top: 16px;
        &:first-child {
          margin-top: 0;
        }
        .data-key {
          background: url("@/assets/leftImage/w-text-bg.png") no-repeat 100%
            100%;
          width: 200px;
          height: 28px;
          display: flex;
          align-items: center;
          > span {
            margin-left: 10px;
            font-family: "钉钉进步体 Regular";
            font-size: 20px;
            font-weight: 600;
            line-height: 24px;
            letter-spacing: 2px;
            background: linear-gradient(179deg, #ffffff 19%, #57b2eb 97%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.302);
          }
        }
        .data-val {
          margin-top: 10px;
          .num {
            font-family: "钉钉进步体 Regular";
            font-size: 28px;
            font-weight: normal;
            line-height: 32px;
            letter-spacing: 0px;
            color: #ffffff;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.302);
          }
          .unit {
            margin-left: 4px;
            font-family: "钉钉进步体 Regular";
            font-size: 20px;
            font-weight: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #8091ab;
          }
        }
      }
    }
  }
}
</style>
